<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        #cat1{
            padding: 0;
            margin: 0 auto;
            width: 100%;
            height: 500px;
            background-image:url("imgs/top-catcafe-1.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        #cat_bottom{
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
        }
        .cat-cafe-top{
            color: #64c9e1;
            font-size: 3em;
            text-align: center;
            padding: 1em;
            font-weight:normal;
        }
        .cat-cafe-h3{
            color: #a56437;
            font-size: 28px;
            margin: 20px 0 10px;
            font-weight:normal;
        }
        .cat-cafe-h3 small{
            color: #9A9A9A;
            font-weight: 300;
            line-height: 1.5;
            font-size: 60%;
        }
        .cat-cafe-container{
            width: 970px;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            box-sizing: border-box;
        }
        .cat-cafe-row{
            margin-right: -15px;
            margin-left: -15px;
        }
        .cat-cafe-col{
            width: 58.3%;
            float: left;
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }
        .cat-cafe-tbl{
            width: 100%;
            border: 1px solid #f1d8b6;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 6px;
            overflow: hidden;
            max-width: 100%;
            background-color: transparent;
        }
        .cat-cafe-tbl thead{
            padding: .6em 1em;
            font-size: 1.2em;
            font-weight: bold;
            color: #fff;
            background-color: #f5b2b2;
            border-bottom: 1px solid #f1d8b6;
        }
        tr{
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }
        th{
            text-align: left;
        }
        .cat-cafe-tbl tbody th, .cat-cafe-tbl tbody td {
            padding: .6em 1em;
            font-weight: bold;
            color: #a56437;
            border-bottom: 1px solid #f1d8b6;
            width: 100px;
        }
        .text-muted {
            color: #999999;
        }
        .coo-bg-lightpink {
            background-color: #fae0e0;
        }
        body{
            font-size: 14px;
            line-height: 1.428571429;
        }
        .cat-cafe-pic{
            padding: 30px;
        }
        .cat-cafe-img1{
            border-radius: 50%;
        }
        .cat-cafe-hr{
            margin-top: 20px;
            margin-bottom: 20px;
            border: 0;
            border-top: 1px solid #eeeeee;
        }
        .el-menu-item_top{
            position:relative;
            left: 170px;
        }
        b:hover{
            color: orange;
        }
        a{
            text-decoration: none;
        }
        a:link{color: black}
        a:visited{color: black}
        a:hover{color: orange}
        a:active{color: orange}
        .el-menu--horizontal>.el-menu-item {
            border-bottom: none;
        }
        .el-menu.el-menu--horizontal {
            border-bottom: none;
        }
        .el-menu--horizontal>.el-menu-item.is-active {
            border-bottom: none;
        }
        .el-icon-arrow-down:before {
            content: none;
        }
    </style>
</head>
<body>
<div style="width: 1000px;margin: 0 auto;padding: 0">
    <el-menu style="width: 1200px;margin: 0 auto"
             mode="horizontal"
             @select="handleSelect"
             text-color="black"
             active-text-color="black">
        <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px; height: 77px"></a>
        <el-menu-item index="1" class="el-menu-item_top"><b><a href="/index.html">首页</a> </b></el-menu-item>
        <el-menu-item class="el-menu-item_top">
            <el-submenu index="2" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>在售品种</b></template>
                <el-menu-item index="2-1"><a href="/searchcat.html">在售猫咪</a></el-menu-item>
                <el-menu-item index="2-2"><a href="/searchdog.html">在售狗狗</a></el-menu-item>
            </el-submenu>
        </el-menu-item>
        <el-menu-item class="el-menu-item_top">
            <el-submenu index="3" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>宠物词典</b></template>
                <el-menu-item index="3-1"><a href="/catDictionary.html">猫咪的饲养方式</a></el-menu-item>
                <el-menu-item index="3-2"><a href="/dogDictionary.html">狗狗的饲养方式</a></el-menu-item>
            </el-submenu>
        </el-menu-item>
        <el-menu-item class="el-menu-item_top">
            <el-submenu index="4" style="position:relative;top:3px;right: 5px">
                <template slot="title"><b>服务项目</b></template>
                <el-menu-item index="4-1"><a href="/宠物美容.html">宠物美容</a></el-menu-item>
                <el-menu-item index="4-2"><a href="/宠物酒店.html">宠物酒店</a></el-menu-item>
                <el-menu-item index="4-3"><a href="/catcafe.html">猫咖啡馆</a></el-menu-item>
                <el-menu-item index="4-4"><a href="/dogpark.html">狗狗公园</a></el-menu-item>
            </el-submenu>
        </el-menu-item>
        <el-menu-item index="5" class="el-menu-item_top"><a href="/lianxi.html"><b>联系我们</b></a></el-menu-item>
        <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
        <div style="float: right;position: relative;top: 10px">
            <el-input type="text">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
    </el-menu>
    <div id="cat1"></div>
    <h1 class="cat-cafe-top">猫咖啡馆</h1>
    <h3 class="cat-cafe-h3">
        猫咖啡馆价格表<small> Cat cafe price list </small>
    </h3>
    <div class="cat-cafe-container">
        <div class="cat-cafe-row">
            <div class="cat-cafe-col">
                <table class="cat-cafe-tbl">
                    <thead>
                        <tr>
                            <th>Menu</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>计费方式<br>
                            <div class="text-muted">每10分钟（最低消费30分钟）</div>
                        </th>
                        <td>&yen;12</td>
                    </tr>
                    <tr>
                        <th class="coo-bg-lightpink">饮料<br>
                            <div class="text-muted">自助 ※按时计费时每人必点</div>
                        </th>
                        <td class="coo-bg-lightpink">&yen;12</td>
                    </tr>
                    <tr>
                        <th>平日一日券<br>
                            <div class="text-muted">包含自助饮料</div>
                        </th>
                        <td>&yen;132</td>
                    </tr>
                    <tr>
                        <th class="coo-bg-lightpink">节假日一日券<br>
                            <div class="text-muted">包含自助饮料</div>
                        </th>
                        <td class="coo-bg-lightpink">&yen;150</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div style="width: 80px;height:80px;float: left;"></div>
            <div class="cat-cafe-pic">
                <img src="imgs/catcafe-price.jpg" alt="猫的图片" class="cat-cafe-img1">
            </div>
        </div>
    </div>
    <hr class="cat-cafe-hr">
    <h3 class="cat-cafe-h3">
        特征<small> Feature </small>
    </h3>
    <div>
        <div class="cat-cafe-container">
            <p>空陆宠物店的服务项目之一、猫咖啡馆Puchi Marry。</p>
            <p>我们努力创造一个可以让您与各种猫咪温馨共处，提供缓解日常疲劳的非凡空间。</p>
            <p>让您在与猫咪玩耍时放松身心，就像在自己家中一样。</p>
            <p>我们力争为想要和可爱的猫咪一起玩耍，享受疗癒时光的客人们提供舒适的环境。</p>
            <p>各种各样的猫咪们恭候您的光临</p>
        </div>
    </div>
    <hr class="cat-cafe-hr">
    <div id="cat_bottom">
        <el-row>
            <el-col span="4.8" v-for="item in imgUrl">
                <el-card>
                    <img :src="item.url" style="width: 280px;height: 250px">
                    <p style="text-align: center">{{item.info}}</p>
                </el-card>
            </el-col>
        </el-row>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            imgUrl:[{url:"imgs/cata.jpg",info:"猫咖啡馆view1"},
                {url:"imgs/catb.jpg",info:"猫咖啡馆view2"},
                {url:"imgs/catc.jpg",info:"猫咖啡馆view3"}]
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>